<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 表单 - 整个页面结构的第一行 -->
        <el-form label-width="80px">
          <el-row>
            <!-- 关键字 -->
            <el-col :span="21">
              <div class="grid-content bg-purple">
                <el-form-item label="关键字">
                  <el-input v-model="keyword" placeholder="根据编号搜索" style="width: 192px">
                  </el-input>
                </el-form-item>
              </div>
            </el-col>
            <!-- 按钮 -清除 和 搜索 -->
            <el-col :span="3">
              <div class="grid-content bg-purple">
                <el-button @click="eliminate">清除</el-button>
                <el-button type="primary" @click="basicsRandoms(keyword)">搜索</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>

        <!-- 提示 -->
        <el-alert :title="`数据一共 ${total} 条`" type="info" :closable="false" show-icon>
        </el-alert>

        <!-- 表格 -->
        <el-table
          size="medium"
          :data="tableData"
          :header-cell-style="{
            borderBottom: '2px solid #e8e8e8',
            background: '#fafafa'
          }"
          style="width: 100%"
          :row-style="{ height: '72px' }"
        >
          <!-- 编号 -->
          <el-table-column prop="id" label="编号" width="220"> </el-table-column>
          <!-- 题型 -->
          <el-table-column prop="questionType" label="题型" width="100" :formatter="questionTypeFn">
          </el-table-column>
          <!-- 题目编号 -->
          <el-table-column prop="visits" label="题目编号">
            <template #default="{ row }">
              <a @click="openDialog(row)" href="javascript:;" style="color: rgb(0, 153, 255)">
                {{ row.questionIDs[0].number }}</a
              >
            </template>
          </el-table-column>
          <!-- 录入时间 -->
          <el-table-column prop="addTime" label="录入时间" width="180"> </el-table-column>
          <!-- 答题时间 -->
          <el-table-column prop="totalSeconds" label="答题时间"> </el-table-column>
          <!-- 正确率 -->
          <el-table-column prop="accuracyRate" label="正确率" width="80"> </el-table-column>
          <!-- 录入人 -->
          <el-table-column prop="userName" label="录入人"> </el-table-column>
          <!-- 操作 -->
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button
                @click="delGroup(row.id)"
                type="danger"
                icon="el-icon-delete"
                circle
              ></el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="hmmm_wrapper">
          <el-pagination
            background
            :current-page="page"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="pagesize"
            layout=" prev,pager,next,sizes,jumper"
            :total="total"
            @size-change="pageDataAmount"
            @current-change="goToPage"
          >
          </el-pagination>
        </div>
      </el-card>
      <!-- 对话框 -->
      <el-dialog width="900px" title="题目预览" :visible.sync="ShowDialog">
        <el-row>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              【题型】： {{ questionTypeFn('', '', rowData.questionType, '') }}
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple-light">【编号】：{{ rowData.id }}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">【难度】：</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple-light">【标签】：</div>
          </el-col>
        </el-row>
        <br />
        <el-row>
          <el-col :span="6"><div class="grid-content bg-purple">【学科】：</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple-light">【目录】：</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple">【方向】：</div></el-col>
        </el-row>
        <br />
        <hr />
        <div class="grid-content bg-purple">
          【题干】：
          <div style="color: blue"></div>
        </div>
        <div>
          <p>题 选项：（以下选中的选项为正确答案）</p>
          <!-- 单选框 -->
          <el-radio-group> <el-radio></el-radio><br /> </el-radio-group>
        </div>
        <hr />
        <div class="margin">
          【参考答案】：
          <el-button type="danger" @click="showVideo = !showVideo">视频答案预览</el-button>
          <div class="margin" v-if="showVideo">
            <video controls style="height: 300px">
              <source src="#" type="video/mp4" width="400" />
            </video>
          </div>
        </div>
        <hr />
        <div class="margin2">【答案解析】：</div>
        <hr />
        <div class="margin">【题目备注】：</div>
        <div class="hmmm_wrapper">
          <el-button type="primary" @click="ShowDialog = false">关闭</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { basicsRandomsAPI, basicsRemoveRandomsAPI } from '@/api/hmmm/questions.js'
import { questionType } from '@/api/hmmm/constants.js'
export default {
  data() {
    return {
      keyword: '', // 关键字
      tableData: [], // 表格数据
      // ---------
      page: 1, // 当前页数
      pagesize: 5, // 当前页数据量
      total: 0, // 共用多少数据
      ShowDialog: false, // 对话框开关
      rowData: {},
      showVideo: false
    }
  },
  created() {
    this.basicsRandoms() // 渲染列表
  },
  methods: {
    // 获取文章列表
    async basicsRandoms(val) {
      const { data } = await basicsRandomsAPI({
        page: this.page, // 当前页数
        pagesize: this.pagesize, // 当前页数据量
        keyword: val
      })
      this.total = data.counts
      this.tableData = data.items
    },
    // 每页多少条数据
    pageDataAmount(val) {
      this.pagesize = val
      this.basicsRandoms()
    },
    // 页数发生改变触发
    goToPage(val) {
      this.page = val
      this.basicsRandoms()
    },
    // 处理题型
    questionTypeFn(row, column, cellValue, index) {
      const obj = questionType.find(item => item.value === +cellValue)
      return obj ? obj.label : '未知'
    },
    // 删除
    delGroup(id) {
      this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await basicsRemoveRandomsAPI({ id: id })
          this.basicsRandoms() // 渲染列表
          this.$message.success('删除成功!')
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    },
    // 打开弹框
    openDialog(row) {
      this.ShowDialog = true
      this.rowData = row
    },
    // 清除
    eliminate() {
      this.keyword = ''
      this.basicsRandoms() // 渲染列表
    }
  }
}
</script>

<style scoped>
.el-alert {
  margin-bottom: 15px;
}
.hmmm_wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 25px;
}
</style>
